<template>
	<div class="father">
		<h1>概述：自定义事件常用于：子 => 父。</h1>
		<h3>父组件</h3>
		<h3>收到的玩具：{{ toy }}</h3>

		<!-- 这里的 send-toy 是自定义的一个事情名称 -->
		<!--在父组件中，给子组件绑定自定义事件：-->
		<Child @send-toy="saveToy"></Child>

	</div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue';
import { ref } from 'vue';

let toy = ref('')

function saveToy(value: string) {
	console.log('父组件收到事件触发。。。。。。。')
	toy.value = value;
}

</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-right: 5px;
}
</style>